<template>
  <view class="pet-detail">
    <!-- 导航栏 -->
    <view class="nav-bar">
      <view class="back-btn" @tap="goBack">
        <text class="back-icon">←</text>
      </view>
      <text class="page-title">{{pet ? pet.name : '宠物详情'}}</text>
    </view>

    <view class="detail-content" v-if="pet">
      <!-- 宠物头像和基本信息 -->
      <view class="pet-header">
        <view class="pet-avatar" :class="{ 'edit-mode': editMode }">
          <text class="pet-emoji">{{ pet.type === 'cat' ? '' : '🐶' }}</text>
          <!-- 按部位顺序渲染 -->
          <template v-for="category in ['head', 'body', 'effect']">
            <view 
              v-for="item in activeCostumes.filter(c => c.category === category)"
              :key="item.id"
              class="costume-layer"
              :class="{ 'dragging-layer': draggingItem && draggingItem.id === item.id }"
              :style="getCostumeStyle(item)"
              @touchstart="handleAvatarDragStart(item, $event)"
              @touchmove.prevent="handleDragMove($event)"
              @touchend="handleDragEnd"
            >
              <text class="costume-emoji">{{ item.icon }}</text>
            </view>
          </template>
        </view>
        <text class="pet-name">{{ pet.name }}</text>
      </view>

      <!-- 宠物状态 -->
      <view class="pet-stats">
        <view class="stat-item">
          <text class="stat-label">健康</text>
          <view class="progress-bar">
            <view 
              class="progress" 
              :style="'width:' + pet.health + '%;background-color:' + getHealthColor(pet.health)"
            ></view>
          </view>
          <text class="stat-value">{{ pet.health }}%</text>
        </view>

        <view class="stat-item">
          <text class="stat-label">饥饿度</text>
          <view class="progress-bar">
            <view 
              class="progress" 
              :style="'width:' + pet.hunger + '%;background-color:' + getHungerColor(pet.hunger)"
            ></view>
          </view>
          <text class="stat-value">{{ pet.hunger }}%</text>
        </view>

        <view class="stat-item">
          <text class="stat-label">心情</text>
          <view class="progress-bar">
            <view 
              class="progress" 
              :style="'width:' + pet.happiness + '%;background-color:' + getHappinessColor(pet.happiness)"
            ></view>
          </view>
          <text class="stat-value">{{ pet.happiness }}%</text>
        </view>
      </view>

      <!-- 互动按钮 -->
      <view class="action-buttons">
        <view class="action-btn feed" @tap="feedPet">
          <text class="action-icon">🍖</text>
          <text class="action-text">喂食</text>
        </view>
        
        <view class="action-btn play" @tap="playWithPet">
          <text class="action-icon">⚽</text>
          <text class="action-text">玩耍</text>
        </view>
        
        <view class="action-btn clean" @tap="cleanPet">
          <text class="action-icon">🛁</text>
          <text class="action-text">清洁</text>
        </view>
      </view>

      <!-- 装扮系统 -->
      <view class="costume-system">
        <view class="header">
          <text class="section-title">装扮系统</text>
          <text 
            class="current-effect" 
            v-if="activeCostumes.length > 0"
          >
            当前生效：{{ activeCostumes.map(c => c.name).join(' + ') }}
          </text>
        </view>
        
        <!-- 分类筛选部分 -->
        <view class="category-nav">
          <scroll-view scroll-x class="nav-scroll">
            <view 
              v-for="type in costumeTypes"
              :key="type.value"
              class="category-item"
              :class="{ active: currentFilter === type.value }"
              @tap="filterCostumes(type.value)"
            >
              <text class="category-icon">{{ type.icon }}</text>
              <text class="category-name">{{ type.label }}</text>
            </view>
          </scroll-view>
        </view>
        
        <!-- 装扮列表 -->
        <scroll-view
          scroll-y
          class="costume-grid"
          :style="{ height: scrollHeight + 'px' }"
        >
          <view 
            v-for="item in filteredCostumes"
            :key="item.id"
            class="costume-card"
            :class="{ active: isCostumeActive(item.id) }"
            @tap.stop="handleCostumeClick(item)"
          >
            <view class="card-content">
              <text class="costume-icon">{{ item.icon }}</text>
              <text class="costume-name">{{ item.name }}</text>
              <view class="position-tag">
                <text>X: {{ item.position.left }}</text>
                <text>Y: {{ item.position.top }}</text>
              </view>
            </view>
          </view>
        </scroll-view>
      </view>

      <!-- 添加调整模式开关 -->
      <view class="edit-mode-switch">
        <switch 
          :checked="editMode" 
          @change="toggleEditMode" 
          color="#4CAF50"
        />
        <text>调整模式</text>
      </view>
    </view>

    <!-- 空状态 -->
    <view v-else class="empty-state">
      <text class="empty-text">未找到宠物信息</text>
    </view>
  </view>
</template>

<script>
export default {
  name: 'PetDetail',
  
  data() {
    return {
      pet: null,
      decayInterval: null,
      costumes: [
        { 
          id: 1, 
          name: '草帽', 
          icon: '👒',
          category: 'head',
          effect: { happiness: +5 },
          position: { top: '-20%', left: '50%', scale: 1.2, rotate: '-5deg' }
        },
        { 
          id: 2, 
          name: '领结', 
          icon: '🎀',
          category: 'head',
          effect: { happiness: +3 },
          position: { top: '70%', left: '50%', scale: 0.8 }
        },
        { 
          id: 3, 
          name: '墨镜', 
          icon: '🕶️',
          category: 'head',
          effect: { health: +2 },
          position: { top: '40%', left: '50%', scale: 1.1 }
        },
        { 
          id: 4,
          name: '天使光环',
          icon: '😇',
          category: 'head',
          effect: { health: +5 },
          position: { 
            top: '-30%', 
            left: '50%', 
            scale: 0.8, 
            rotate: '0deg',
            zIndex: 3 
          }
        },
        { 
          id: 5,
          name: '小翅膀',
          icon: '🪽',
          category: 'body',
          effect: { happiness: +8 },
          position: { 
            top: '50%', 
            left: '20%', 
            scale: 1.1, 
            rotate: '-15deg',
            zIndex: 1 
          }
        },
        { 
          id: 6,
          name: '魔法棒',
          icon: '✨',
          category: 'body',
          effect: { happiness: +10 },
          position: { 
            top: '10%', 
            left: '80%', 
            scale: 0.9,
            rotate: '25deg',
            zIndex: 4 
          }
        },
        { 
          id: 7,
          name: '动态表情',
          icon: '🌟',
          category: 'body',
          effect: { happiness: +15 },
          position: {
            top: '50%',
            left: '50%',
            scale: 1.5,
            animation: 'pulse 2s infinite'
          }
        },
        { 
          id: 8,
          name: '巫师帽',
          icon: '🧙',
          category: 'head',
          effect: { happiness: +8 },
          position: { top: '-25%', left: '50%', scale: 1.1, rotate: '-5deg' }
        },
        { 
          id: 9,
          name: '兔耳朵',
          icon: '🐰',
          category: 'head',
          effect: { health: +5 },
          position: { top: '-15%', left: '50%', scale: 0.9 }
        },
        { 
          id: 10,
          name: '披风',
          icon: '🦸',
          category: 'body',
          effect: { health: +10 },
          position: { top: '30%', left: '50%', scale: 1.2, zIndex: 2 }
        },
        { 
          id: 11,
          name: '围巾',
          icon: '🧣',
          category: 'body',
          effect: { happiness: +7 },
          position: { top: '80%', left: '50%', scale: 0.85 }
        },
        { 
          id: 12,
          name: '星光',
          icon: '🌠',
          category: 'effect',
          effect: { happiness: +12 },
          position: { 
            top: '50%', 
            left: '50%', 
            scale: 2, 
            animation: 'twinkle 2s infinite, glow 1.5s ease-in-out infinite',
            filter: 'drop-shadow(0 0 8px gold)'
          }
        },
        { 
          id: 13,
          name: '雪花',
          icon: '❄️',
          category: 'effect',
          effect: { health: +5 },
          position: {
            top: '20%',
            left: '30%',
            scale: 0.8,
            rotate: '15deg',
            animation: 'snowfall 5s linear infinite'
          }
        }
      ],
      currentCostumes: {},
      costumeTypes: [
        { value: 'all', label: '全部', icon: '📦' },
        { value: 'head', label: '头部', icon: '👒' },
        { value: 'body', label: '身体', icon: '👕' },
        { value: 'effect', label: '特效', icon: '✨' },
        { value: 'limited', label: '限定', icon: '🎁' }
      ],
      currentFilter: 'all',
      wigglingId: null,
      wiggleInterval: null,
      wiggleValue: 0,
      collectedCostumes: [],
      inventory: {},
      limitedCostumes: [
        {
          id: 99,
          name: '圣诞帽',
          icon: '🎅',
          effect: { happiness: +20 },
          position: { top: '-25%', left: '50%' },
          expire: '2023-12-31'
        }
      ],
      scrollHeight: 0,
      editMode: false,
      draggingItem: null,
      startX: 0,
      startY: 0,
      touchStartX: 0,
      touchStartY: 0,
      avatarWidth: 0,
      avatarHeight: 0,
      lastSave: 0
    }
  },

  mounted() {
    this.startDecaySystem()
    this.collectedCostumes = uni.getStorageSync('collectedCostumes') || []
    this.inventory = uni.getStorageSync('craftingInventory') || {}
    const systemInfo = uni.getSystemInfoSync()
    this.scrollHeight = systemInfo.windowHeight - 200 // 根据实际导航栏高度调整
    this.avatarWidth = 120 // 假设头像宽度为120px
    this.avatarHeight = 120 // 假设头像高度为120px
  },

  beforeDestroy() {
    clearInterval(this.decayInterval)
  },

  onLoad(options) {
    if (options.id) {
      this.loadPetDetails(options.id)
      this.currentCostumes = uni.getStorageSync('petCostumes') || {}
    }
  },

  computed: {
    activeCostumes() {
      return Object.values(this.currentCostumes)
        .map(id => this.costumes.find(c => c.id === id))
        .filter(Boolean);
    },
    filteredCostumes() {
      return this.costumes.filter(c => {
        if (this.currentFilter === 'limited') {
          return this.validLimitedCostumes.some(lc => lc.id === c.id)
        }
        if (this.currentFilter === 'all') return true
        return c.category === this.currentFilter
      }).sort((a, b) => a.id - b.id)
    },
    validLimitedCostumes() {
      return this.limitedCostumes.filter(c => 
        new Date() < new Date(c.expire)
      )
    }
  },

  methods: {
    startDecaySystem() {
      // 每分钟衰减1%
      this.decayInterval = setInterval(() => {
        if (!this.pet) return
        
        this.pet = {
          ...this.pet,
          health: Math.max(0, this.pet.health - 1),
          hunger: Math.max(0, this.pet.hunger - 2),
          happiness: Math.max(0, this.pet.happiness - 1.5)
        }
        
        this.updatePet() // 自动保存
        this.checkStatusEffects() // 新增状态检查
      }, 60000) // 每分钟执行一次
    },

    checkStatusEffects() {
      if (this.pet.health < 30) {
        uni.showToast({
          title: `${this.pet.name}看起来不太舒服！`,
          icon: 'none'
        })
      }
      if (this.pet.hunger < 20) {
        uni.showToast({
          title: `${this.pet.name}饿得没力气了！`,
          icon: 'none'
        })
      }
    },

    loadPetDetails(id) {
      const pets = uni.getStorageSync('pets') || []
      const pet = pets.find(p => p.id === Number(id))
      if (pet) {
        // 计算离线时间衰减
        const minutesPassed = Math.floor((Date.now() - (pet.lastUpdate || Date.now())) / 60000)
        this.pet = {
          ...pet,
          health: Math.max(0, pet.health - minutesPassed * 1),
          hunger: Math.max(0, pet.hunger - minutesPassed * 2),
          happiness: Math.max(0, pet.happiness - minutesPassed * 1.5),
          lastUpdate: Date.now()
        }
      }

      // 加载装饰数据
      const saved = uni.getStorageSync('PET_COSTUME_DATA')?.data || {}
      if (saved.costumes) {
        this.costumes = this.costumes.map(item => {
          const savedPos = saved.costumes.find(c => c.id === item.id)?.position
          return savedPos ? {...item, position: savedPos} : item
        })
      }
      this.currentCostumes = saved.currentCostumes || {}
    },

    goBack() {
      uni.navigateBack()
    },

    getHealthColor(value) {
      if (value > 66) return '#4CAF50'
      if (value > 33) return '#FFC107'
      return '#F44336'
    },

    getHungerColor(value) {
      if (value > 66) return '#4CAF50'
      if (value > 33) return '#FFC107'
      return '#F44336'
    },

    getHappinessColor(value) {
      if (value > 66) return '#4CAF50'
      if (value > 33) return '#FFC107'
      return '#F44336'
    },

    updatePet(force = false) {
      // 节流控制：每秒最多保存一次，除非强制保存
      if (!force && Date.now() - this.lastSave < 1000) return
      
      // 保存宠物基础状态到pets列表
      const pets = uni.getStorageSync('pets') || []
      const petIndex = pets.findIndex(p => p.id === this.pet.id)
      if (petIndex !== -1) {
        pets[petIndex] = {
          ...pets[petIndex],
          health: this.pet.health,
          hunger: this.pet.hunger,
          happiness: this.pet.happiness,
          lastUpdate: Date.now()
        }
        uni.setStorageSync('pets', pets)
      }

      // 保存装扮数据
      const saveData = {
        costumes: this.costumes.map(c => ({
          id: c.id,
          position: c.position
        })),
        currentCostumes: this.currentCostumes
      }
      
      uni.setStorageSync('PET_COSTUME_DATA', {
        lastSave: Date.now(),
        data: saveData
      })
      this.lastSave = Date.now()
    },

    feedPet() {
      if (this.pet.hunger >= 100) {
        uni.showToast({
          title: '宠物已经吃饱了',
          icon: 'none'
        })
        return
      }

      this.pet.hunger = Math.min(100, this.pet.hunger + 20)
      this.pet.happiness = Math.min(100, this.pet.happiness + 5)
      this.updatePet()

      uni.showToast({
        title: '喂食成功！',
        icon: 'success'
      })
    },

    playWithPet() {
      if (this.pet.happiness >= 100) {
        uni.showToast({
          title: '宠物已经很开心了',
          icon: 'none'
        })
        return
      }

      this.pet.happiness = Math.min(100, this.pet.happiness + 20)
      this.pet.hunger = Math.max(0, this.pet.hunger - 10)
      this.updatePet()

      uni.showToast({
        title: '玩耍成功！',
        icon: 'success'
      })
    },

    cleanPet() {
      if (this.pet.health >= 100) {
        uni.showToast({
          title: '宠物已经很干净了',
          icon: 'none'
        })
        return
      }

      this.pet.health = Math.min(100, this.pet.health + 20)
      this.pet.happiness = Math.min(100, this.pet.happiness + 5)
      this.updatePet()

      uni.showToast({
        title: '清洁成功！',
        icon: 'success'
      })
    },

    changeCostume(item) {
      const index = this.activeCostumes.findIndex(c => c.id === item.id)
      if (index === -1) {
        this.activeCostumes.push(item)
      } else {
        this.activeCostumes.splice(index, 1)
      }
      // 应用效果...
    },

    getEffectText(key, value) {
      const map = {
        health: '健康',
        hunger: '饱食',
        happiness: '快乐'
      }
      return `${map[key]} +${value}%`
    },

    getCostumeName(id) {
      return this.costumes.find(c => c.id === id)?.name || ''
    },

    getCostumeStyle(item) {
      return {
        ...item.position,
        zIndex: item.position.zIndex || 
          (item.category === 'head' ? 3 :
           item.category === 'body' ? 2 :
           item.category === 'effect' ? 4 : 1)
      };
    },

    filterCostumes(type) {
      this.currentFilter = type
    },

    startWiggle(id) {
      this.wigglingId = id
      this.wiggleInterval = setInterval(() => {
        this.wiggleValue = Math.sin(Date.now() / 100) * 10
      }, 50)
    },

    stopWiggle() {
      clearInterval(this.wiggleInterval)
      this.wigglingId = null
      this.wiggleValue = 0
    },

    addToInventory(item) {
      this.inventory[item] = (this.inventory[item] || 0) + 1
      uni.setStorageSync('craftingInventory', this.inventory)
    },

    useMaterials(materials) {
      Object.entries(materials).forEach(([item, count]) => {
        this.inventory[item] -= count
      })
      uni.setStorageSync('craftingInventory', this.inventory)
    },

    getCostumeItemStyle(item) {
      return {
        transform: `rotate(${this.wigglingId === item.id ? this.wiggleValue : 0}deg)`
      }
    },

    handleAvatarDragStart(item, e) {
      if (!this.editMode) return;
      this.draggingItem = item;
      const touch = e.touches[0];
      // 记录元素当前相对位置
      this.startX = parseFloat(item.position.left) || 0;
      this.startY = parseFloat(item.position.top) || 0;
      // 记录初始触摸点坐标
      this.touchStartX = touch.clientX;
      this.touchStartY = touch.clientY;
    },

    handleDragMove(e) {
      e.preventDefault();
      if (!this.editMode || !this.draggingItem) return;
      const touch = e.touches[0];
      const systemInfo = uni.getSystemInfoSync();
      
      // 计算移动差值
      const deltaX = touch.clientX - this.touchStartX;
      const deltaY = touch.clientY - this.touchStartY;
      
      // 转换为百分比
      const newX = (this.startX + (deltaX / systemInfo.windowWidth) * 100);
      const newY = (this.startY + (deltaY / systemInfo.windowHeight) * 100);
      
      // 限制在屏幕范围内（-20%到120%保证可以完全移出可视区域）
      this.draggingItem.position.left = Math.min(120, Math.max(-20, newX)).toFixed(2) + '%';
      this.draggingItem.position.top = Math.min(120, Math.max(-20, newY)).toFixed(2) + '%';
      
      this.$forceUpdate();
      
      // 节流保存
      this.updatePet()
    },

    handleDragEnd() {
      if (!this.editMode) return;
      // 强制立即保存
      this.updatePet(true)
      this.draggingItem = null;
    },

    toggleEditMode(e) {
      this.editMode = e.detail.value;
      if (!this.editMode) {
        this.draggingItem = null;
        this.updatePet();
      }
    },

    isCostumeActive(id) {
      return Object.values(this.currentCostumes).includes(id);
    },

    handleCostumeClick(item) {
      if (this.editMode) return;
      
      const category = item.category;
      
      if (this.currentCostumes[category] === item.id) {
        delete this.currentCostumes[category];
      } else {
        this.$set(this.currentCostumes, category, item.id);
      }
      
      this.$forceUpdate();
    }
  }
}
</script>

<style lang="scss">
.pet-detail {
  min-height: 100vh;
  background: linear-gradient(to bottom, #f8f9fa, #e9ecef);
  padding-top: 44px;
}

.nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 44px;
  background: linear-gradient(135deg, #4CAF50, #45a049);
  display: flex;
  align-items: center;
  padding: 0 16px;
  z-index: 100;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  
  .back-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    
    .back-icon {
      color: white;
      font-size: 18px;
    }
  }
  
  .page-title {
    color: white;
    font-size: 18px;
    font-weight: 600;
    margin-left: 12px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.1);
  }
}

.detail-content {
  padding: 20px 16px;
}

.pet-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 24px;
  
  .pet-avatar {
    position: relative;
    width: 120px;
    height: 120px;
    background: white;
    border-radius: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    border: 4px solid #fff;
    transform: translateY(0);
    transition: all 0.3s ease;
    
    &:active {
      transform: translateY(2px);
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }
    
    .pet-emoji {
      font-size: 64px;
      animation: bounce 2s infinite;
    }

    .costume-layer {
      position: absolute;
      pointer-events: none;
      z-index: 2;
      transform-origin: center;

      .costume-emoji {
        font-size: 1.5em;
        filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
        animation: float 3s ease-in-out infinite;
      }
    }
  }
  
  .pet-name {
    font-size: 24px;
    font-weight: 700;
    color: #2c3e50;
    text-shadow: 0 1px 2px rgba(0,0,0,0.05);
  }
}

.pet-stats {
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  border: 1px solid rgba(255,255,255,0.4);
  
  .stat-item {
    margin-bottom: 20px;
    
    &:last-child {
      margin-bottom: 0;
    }
    
    .stat-label {
      font-size: 15px;
      color: #4a5568;
      margin-bottom: 8px;
      display: flex;
      align-items: center;
      font-weight: 600;
      
      &::before {
        content: '';
        display: inline-block;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #4CAF50;
        margin-right: 8px;
      }
    }
    
    .progress-bar {
      height: 10px;
      background: #edf2f7;
      border-radius: 5px;
      overflow: hidden;
      margin-bottom: 6px;
      box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);
      
      .progress {
        height: 100%;
        transition: width 0.5s ease, background-color 0.5s ease;
        border-radius: 5px;
      }
    }
    
    .stat-value {
      font-size: 13px;
      color: #718096;
      font-weight: 500;
    }
  }
}

.action-buttons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 0 4px;
  
  .action-btn {
    background: white;
    border-radius: 16px;
    padding: 16px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    transform: translateY(0);
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
    
    &:active {
      transform: translateY(2px);
      box-shadow: 0 2px 6px rgba(0,0,0,0.06);
    }
    
    &::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 4px;
      background: currentColor;
      opacity: 0.1;
    }
    
    .action-icon {
      font-size: 32px;
      margin-bottom: 8px;
      transform: scale(1);
      transition: transform 0.2s ease;
    }
    
    .action-text {
      font-size: 14px;
      color: #2d3748;
      font-weight: 600;
    }
    
    &.feed {
      background: #fff8f1;
      color: #ed8936;
      
      &:active .action-icon {
        transform: scale(0.9);
      }
    }
    
    &.play {
      background: #ebf8ff;
      color: #3182ce;
      
      &:active .action-icon {
        transform: rotate(15deg);
      }
    }
    
    &.clean {
      background: #f0fff4;
      color: #38a169;
      
      &:active .action-icon {
        transform: translateY(-2px);
      }
    }
  }
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 400px;
  padding: 32px;
  text-align: center;
  
  .empty-text {
    color: #a0aec0;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.6;
    max-width: 240px;
    margin: 0 auto;
  }
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* 低数值闪烁效果 */
@keyframes warning-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.low-health .progress {
  animation: warning-blink 1s infinite;
  background-color: #ff5252 !important;
}

.costume-system {
  margin: 24px 0;
  padding: 16px;
  background: rgba(255,255,255,0.95);
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    
    .section-title {
      font-size: 18px;
      font-weight: 600;
      color: #2d3748;
    }
    
    .current-effect {
      font-size: 12px;
      color: #718096;
    }
  }

  /* 分类导航 */
  .category-nav {
    background: #fff;
    padding: 16rpx 0;
    box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.06);
    
    .nav-scroll {
      white-space: nowrap;
      padding: 0 20rpx;
      
      &::-webkit-scrollbar {
        display: none;
      }
    }

    .category-item {
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      padding: 0 32rpx;
      transition: all 0.3s ease;
      
      &.active {
        .category-icon {
          transform: scale(1.2);
          color: #4CAF50;
        }
        .category-name {
          color: #4CAF50;
          font-weight: 600;
        }
      }
    }

    .category-icon {
      font-size: 44rpx;
      margin-bottom: 8rpx;
      transition: all 0.3s ease;
    }

    .category-name {
      font-size: 24rpx;
      color: #666;
      white-space: nowrap;
    }
  }

  /* 装扮列表 */
  .costume-grid {
    padding: 20rpx;
    
    .costume-card {
      display: inline-block;
      width: 48%;
      margin: 1%;
      background: #fff;
      border-radius: 16rpx;
      box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.06);
      overflow: hidden;
    }
  }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.costume-layer {
  &[data-category="head"] { z-index: 3; }
  &[data-category="body"] { z-index: 2; }
  &[data-category="effect"] { z-index: 4; }
}

.costume-item {
  transition: transform 0.1s ease;
}

@keyframes sparkle {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

.special-effect::after {
  content: '✨';
  animation: sparkle 1.5s infinite;
  position: absolute;
  top: -10px;
  right: -10px;
}

/* 优化后的装扮卡片样式 */
.costume-card {
  width: 220rpx;
  background: white;
  border-radius: 16rpx;
  margin: 10rpx;
  transition: all 0.2s ease;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.08);
  overflow: visible;
  
  &:active {
    transform: scale(0.95);
    background: #f8fff9;
  }
  
  &.active {
    .costume-icon {
      animation: bounce 0.6s ease;
    }
  }

  .card-content {
    padding: 20rpx;
    position: relative;
  }

  .costume-icon {
    font-size: 60rpx;
    display: block;
    margin: 0 auto 10rpx;
    transition: all 0.2s ease;
  }

  .costume-name {
    font-size: 24rpx;
    color: #2d3748;
    text-align: center;
    display: block;
    margin-bottom: 8rpx;
  }

  .position-tag {
    background: rgba(0,0,0,0.6);
    color: white;
    padding: 4rpx 12rpx;
    border-radius: 8rpx;
    font-size: 20rpx;
    text-align: center;
    
    text {
      display: block;
      line-height: 1.4;
    }
  }
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-15px); }
}

/* 调整模式开关 */
.edit-mode-switch {
  position: fixed;
  right: 30rpx;
  bottom: 120rpx;
  background: white;
  padding: 12rpx 24rpx;
  border-radius: 40rpx;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.1);
  display: flex;
  align-items: center;
  gap: 12rpx;
  
  text {
    font-size: 24rpx;
    color: #4CAF50;
  }
}

/* 优化分类导航激活状态 */
.category-item.active {
  position: relative;
  
  &::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 4rpx;
    background: #4CAF50;
    border-radius: 2rpx;
  }
}

/* 添加编辑模式样式 */
.edit-mode {
  .costume-layer {
    pointer-events: auto !important;
    transition: transform 0.2s ease;
    
    &:active {
      transform: scale(1.1);
    }
  }
  
  .pet-avatar {
    outline: 2px dashed #4CAF50;
    background: rgba(255,255,255,0.9);
  }
}

.dragging-layer {
  z-index: 999 !important;
  filter: drop-shadow(0 0 8px rgba(76,175,80,0.3));
  transform: scale(1.15);
  transition: none;
}

@keyframes twinkle {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

@keyframes glow {
  0%, 100% { filter: drop-shadow(0 0 8px gold); }
  50% { filter: drop-shadow(0 0 12px #ffd700); }
}

@keyframes snowfall {
  0% { 
    transform: translateY(-100%) rotate(15deg);
    opacity: 0;
  }
  100% { 
    transform: translateY(200vh) rotate(45deg);
    opacity: 1;
  }
}

.costume-layer[data-category="effect"] {
  pointer-events: none;
  &::after {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    background: radial-gradient(circle, transparent 60%, rgba(255,215,0,0.2));
    mix-blend-mode: screen;
  }
  
  // 雪花特效单独处理
  &[data-item-id="13"] {
    animation: snowfall 5s linear infinite;
    will-change: transform;
  }
}
</style> 